<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div>
  <vxe-toolbar>
    <template #buttons>
      <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
      <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
    </template>
  </vxe-toolbar>
  <vxe-table
    resizable
    border
    ref="xTree"
    row-id="id"
    :row-key="true"
    show-overflow="tooltip"
    highlight-hover-row
    align="center"
    header-align="center"
    :data="tableData"
    :tree-config="{children: 'children', expandAll: true, line: true}">
    <vxe-table-column field="name" title="名称" tree-node></vxe-table-column>
    <vxe-table-column field="identification" title="标识"></vxe-table-column>
    <vxe-table-column field="img1" title="图标">
      <template v-slot="{row}">
        <img v-if="row.type_level === '2' && row.img1" :src="row.img1" style="width: 30px;height: 30px"/>
      </template>
    </vxe-table-column>
    <vxe-table-column field="type_level" title="等级"></vxe-table-column>
    <vxe-table-column field="sort" title="排序"></vxe-table-column>
    <vxe-table-column field="is_click" title="是否可以点击">
      <template v-slot="{row}">
        <div v-if="row.type_level==='2'">
          <Icon type="md-checkmark-circle" size="18" v-if="row.is_click==='0'" color="green"/>
          <Icon type="md-close-circle" size="18" v-else color="red"/>
        </div>
        <div v-else>
          ---
        </div>
      </template>
    </vxe-table-column>
    <vxe-table-column title="操作" width="20%">
      <template v-slot="{ row }">
        <div>
          <Button v-if="row.type_level === '1'" style="margin-right: 5px" size="small" type="primary" @click="addModule(row)">添加下级</Button>
          <Button size="small" type="info" @click="updateModule(row)">修改</Button>
        </div>
      </template>
    </vxe-table-column>
  </vxe-table>
  <Drawer
    title="Create"
    v-model="valueModel"
    width="720"
    :mask-closable="true"
    :styles="styles">
    <Form :model="formData">
      <Row :gutter="32">
        <Col span="24">
          <FormItem label="父级" label-position="top">
            <Select v-model="formData.pid" :disabled="true">
              <Option v-for="(item,index) in tableData" :key="index" :value="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
          <FormItem label="名称" label-position="top">
            <Input v-model="formData.name"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="等级" label-position="top">
            <Select :disabled="true" v-model="formData.type_level" @on-change="findFocusGroupLabelList('2',formData.first_level_id)">
              <Option value="1">一级</Option>
              <Option value="2">二级</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
          <FormItem label="排序" label-position="top">
            <Input v-model="formData.sort"/>
          </FormItem>
        </Col>
        <Col v-if="formData.type_level==='2'" span="12">
          <FormItem label="标识" label-position="top">
            <Input v-model="formData.identification"/>
          </FormItem>
        </Col>
      </Row>
      <Row v-if="formData.type_level==='2'" :gutter="32">
        <Col span="12">
          <FormItem label="一级标签" label-position="top">
            <Select v-model="formData.first_level_id" @on-change="findFocusGroupLabelList('2',formData.first_level_id)">
              <Option v-for="(item,index) in firstLableList" :key="index" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="二级标签" label-position="top">
            <Select v-model="formData.second_level_id">
              <Option v-for="(item,index) in secondLableList" :key="index" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="24">
          <FormItem label="是否允许点击">
            <RadioGroup v-model="formData.is_click">
              <Radio label="0">允许</Radio>
              <Radio label="1">不允许</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="24">
          <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
            <img v-if="imgShow || formData.img1" :src="formData.img1" style="width: 50px;height: 50px;margin-bottom: 20px"/>
            <Button icon="ios-cloud-upload-outline" style="margin-bottom: 20px">上传图标</Button>
          </Upload>
        </Col>
      </Row>
    </Form>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="valueModel = false">关闭</Button>
      <Button type="primary" @click="submitInfo">保存</Button>
    </div>
  </Drawer>
</div>
</template>

<script>
import { findFocusGroupLabelList, findModuleList, saveModule } from '../../../api/eventlist'
import { createUpLoadFiles, getSign } from '../../../api/common'

export default {
  name: 'index',
  data () {
    return {
      valueModel: false,
      tableData: [],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        name: '',
        identification: '',
        type_level: '',
        sort: '',
        is_click: '',
        pid: '',
        first_level_id: '',
        second_level_id: '',
        img1: '',
        img2: '',
        img3: ''
      },
      firstLableList: [],
      secondLableList: [],
      upPicData: {
        fileName: 'module',
        filePath: 'grid/module'
      },
      imgShow: false
    }
  },
  methods: {
    updateModule (row) {
      this.valueModel = true
      this.formData = row
      this.findFocusGroupLabelList('1', '')
      this.findFocusGroupLabelList('2', this.formData.first_level_id)
    },
    addModule (e) {
      this.valueModel = true
      this.formData = {}
      this.formData.pid = e.id
      this.formData.type_level = (parseInt(e.type_level) + 1).toString()
    },
    init () {
      findModuleList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    findFocusGroupLabelList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findFocusGroupLabelList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '1') {
            this.firstLableList = ret.data.data
          } else if (e1 === '2') {
            this.secondLableList = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    beforeUpload (file) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.fileName = that.upPicData.fileName + timeStep + '.' + file.type.substring(6)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let url = res.data.data.docking_url
          let params = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(url, params).then(res => {
            if (res.data.errcode === 0) {
              this.formData.img1 = res.data.data
              this.imgShow = true
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    submitInfo () {
      console.log(this.formData)
      saveModule(this.formData).then(ret => {
        if (ret.data.errcode === 0) {
          this.valueModel = false
          this.init()
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.findFocusGroupLabelList('1', '')
  }
}
</script>

<style scoped>

</style>
